[Note] HTML常用標籤介紹

< h1 > ~ < h6 >

定義標題，從字體大小跟重要程度來說，< h1 > 是最大的標題，< h6 > 則是最小的標題，而通常一個網頁或文章中只會有一個最主要的標題，所以 < h1 > 最好不要使用太多次，這樣搜尋引擎才能清楚知道這個網頁的重點是什麼

<h1>h1標題</h1>
<h2>h2標題</h2>
<h3>h3標題</h3>
<h4>h4標題</h4>
<h5>h5標題</h5>
<h6>h6標題</h6>

< p >

定義段落，是大部分文字段落使用的標籤

<p>這是一段文字</p>

< em >

定義斜體，標籤內的文字會被改為斜體，除了文字本身會變體，還有在語意上強調重要性的用意，有提升 SEO 表現的功能

<em>我是斜體</em>

➡️ 我是斜體

< strong >

定義粗體，標籤內的文字會被改為粗體，除了文字本身會變粗體，還有在語意上強調重要性的用意，有提升 SEO 表現的功能

<em>我是粗體</em>

➡️ 我是粗體

< a href = ”URL” >

定義超連結，超連結可以指向其他網頁或在網頁內部跳轉。其中，必須使用 href 屬性指定跳轉目標的 URL。還有一個 target 屬性，若將其值設為 "_blank"，則超連結被點擊時會在新分頁中顯示，而不是像預設行為一樣在同一頁面跳轉

<a href="https://www.youtube.com/">跳轉至YouTube</a>

< img src = “檔案來源” alt = “圖片替代文字” >

< img > 標籤是用來定義圖片的，跟其他標籤不同的是，它只需要單獨一個 < img >，不需要結束標籤，這種標籤稱之為空元素。其中，src 屬性的值是圖片的檔案來源，這個檔案來源必須要包含副檔名，例如 fileName.jpg。而 alt 屬性的值是一段文字，用來描述圖片的內容，當圖片無法正確顯示時，替代文字會顯示在圖片的位置，一個好的替代文字甚至有助於提升圖片的 SEO 排名

<img src="chubbyCat.jpg" alt="小胖貓">

< ul >

定義無序清單，清單內的項目需要包裹在 < li > 標籤之中

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

➡️ Result

• one
• two
• three

< ol >

定義有序清單，清單內的項目需要包裹在 < li > 標籤之中

<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>

➡️ Result

1. one
2. two
3. three

< br >

< br > 在 HTML 中也是一個空元素標籤，這個標籤的作用就像是一個"換行符號"，可以讓文本顯示在多行而不是一行。在 HTML 裡面，多個空格或直接按 Enter 換行會被當做一個空格處理，但是有時候我們需要在文本中明確的換行，這時就可以使用 < br > 標籤

<p>這是第一行<br>這是第二行</p>

➡️ Result

這是第一行
這是第二行

< hr >

< hr > 在HTML中是一條水平線，用來裝飾及劃分內容區塊

<p>第一段</p>
<hr>
<p>第二段</p>

➡️ Result

第一段

第二段

< div >

< div > 標籤是用來將 HTML 分割成不同區塊的容器標籤，它內部可以包含其他的 HTML 元素，例如文字、圖片、表格等等。一般來說 < div > 標籤會和 CSS 一起使用，來設定網頁的佈局和樣式。比如說，你可以把一些相關的 HTML 元素放在一個 < div > 標籤中，然後使用 CSS 來控制這個 < div > 標籤，進而控制這些 HTML 元素的佈局和樣式

<div>
    <h1>標題</h1>
    <p>內文</p>
    <img src="fileName.jpg" alt="圖片">
</div>

< span >

< span > 是 HTML 中的一個行內元素標籤，它用於將一部分文本或其他內容標記為一個群組，以便對其應用樣式或其他屬性。與 < div > 標籤類似，< span > 標籤不會將文檔劃分為區塊，它只是在文本或其他內容中劃定一個區域。因此，< span > 標籤通常用於對文本或其他內容進行精細的樣式調整，或者用於將一部分內容與其他內容區分開來

<p>這是一段包含<span>重要信息</span>的文字</p>

< table >

< table > 標籤用來製作表格，需要搭配 < tr >,< td >,< th > 標籤一起使用

< tr > 定義表格的一整列，內部容納 < td > 或 < th >

< td > 定義表格的每一個儲存格

< th > 用法和 < td > 相同，只不過它的用途是呈現欄或列的標題

<table>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <th>No.1</th>
        <td>Linus</td>
        <td>24</td>
    </tr>
    <tr>
        <th>No.2</th>
        <td>Susie</td>
        <td>23</td>
    </tr>
</table>

➡️ Result